<template>
    <div style="padding: 10px">
      <!--    功能区域-->
      <div style="margin: 10px 0">
        <el-button type="primary" @click="add">新增</el-button>
      </div>
  
      <!--    搜索区域-->
      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
      </div>
      <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            sortable
            width="80"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="path"
            label="路径">
        </el-table-column>
        <el-table-column
            prop="comment"
            label="备注">
        </el-table-column>
        <el-table-column
            prop="icon"
            label="图标">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <div style="margin: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="form.name" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="form.path" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.comment" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="form.icon" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </template>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  
  import request from "@/utils/request";
  
  export default {

    components: {},
    data() {
      return {
        loading: true,
        form: {},
        dialogVisible: false,
        search: '',
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableData: [],
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        this.loading = true
        request.get("/permission", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res => {
          this.loading = false
          this.tableData = res.data.records
          this.total = res.data.total
        })
      },
      add() {
        // alert(1)
        this.dialogVisible = true
        this.form = {}
      },
      save() {
  
        if (this.form.id) {  // 更新
          request.put("/permission", this.form).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success({
                type: "success",
                message: "更新成功"
              })
            } else {
              this.$message.error({
                type: "error",
                message: res.msg
              })
            }
            this.load() // 刷新表格的数据
            this.dialogVisible = false  // 关闭弹窗
          })
        } else {  // 新增
          let userStr = sessionStorage.getItem("user") || "{}"
          let user = JSON.parse(userStr)
          this.form.author = user.nickName
  
          request.post("/permission", this.form).then(res => {
            console.log(res)
            if (res.code ===200) {
              this.$message.success({
                type: "success",
                message: res.msg
              })
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
  
            this.load() // 刷新表格的数据
            this.dialogVisible = false  // 关闭弹窗
          })
        }
  
      },
      handleEdit(row) {
        // alert(1)
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
      },
      handleDelete(id) {
        console.log(id)
        request.delete("/permission/" + id).then(res => {
          if (res.code === 200) {
            this.$message.success({
              type: "success",
              message: "删除成功"
            })
          } else {
            this.$message.error({
              type: "error",
              message: res.msg
            })
          }
          this.load()  // 删除之后重新加载表格的数据
        })
      },
      handleSizeChange(pageSize) {   // 改变当前每页的个数触发
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {  // 改变当前页码触发
        this.currentPage = pageNum
        this.load()
      }
    }
  }
  </script>
  